<!-- 折叠列表组件 -->
<template>
  <div class="collapse-list">
    <a-collapse v-model:active-key="activeKey">
      <a-collapse-panel key="show" :show-arrow="false">
        <template #header>
          <slot name="header">
            <div ref="collapseHeaderRef" class="header">{{ title }}</div>
          </slot>
        </template>
        <slot>
          <ul class="list-wrap my-scrollbar">
            <li v-for="item in resultList" :key="item.id">{{ item.label }}</li>
          </ul>
        </slot>
      </a-collapse-panel>
    </a-collapse>
    <slot name="footer" :show="activeKey.length">
      <div class="footer" :class="[!activeKey.length && 'rotate']" @click="onChangeActive">
        <i class="iconfont icon-arrow-up-s-line"></i>
      </div>
    </slot>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  export interface ResultOptions {
    id: string
    label: string
    value?: string | number
  }

  export interface ResultCardProps {
    // 阈值
    title?: string
    defaultShow?: boolean
    // 结果列表
    resultList?: ResultOptions[]
  }
  const props = withDefaults(defineProps<ResultCardProps>(), {
    title: '识别结果',
    defaultShow: false
  })

  const activeKey = ref(props.defaultShow ? ['show'] : [])
  const collapseHeaderRef = ref()

  const onChangeActive = () => {
    collapseHeaderRef.value?.click()
  }
</script>

<style lang="less" scoped>
  .collapse-list {
    position: relative;
    z-index: 2;
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 0 0 0 6px;
    box-shadow: 0 2px 8px 0 rgba(37, 37, 45, 0.14), 0 1px 3px 0 rgba(37, 37, 45, 0.14);
    flex-direction: column;
    border-bottom: 1px solid #d9d9db;
    border-left: 1px solid #d9d9db;

    .expand-icon {
      position: absolute;
      bottom: 0;
    }

    :deep(.ant-collapse) {
      border: none;

      .ant-collapse-content > .ant-collapse-content-box {
        padding: 0;
      }

      .ant-collapse-item,
      .ant-collapse-content {
        border: none;
      }
    }

    :deep(.ant-collapse-header) {
      padding: 12px;
      background-color: #fff;
      border: none;
      border-radius: 0;
      // 禁止点击
      pointer-events: none;
    }

    .header {
      font-size: 14px;
      color: rgba(25, 25, 48, 0.75);
      font-weight: 700;
      line-height: 22px;
      background-color: #fff;
    }

    .list-wrap {
      overflow: auto;
      max-height: 300px;

      > li {
        padding: 8px 12px;
        font-size: 14px;
        color: rgba(16, 16, 20, 0.95);
        font-weight: 400;
        line-height: 22px;

        &:nth-child(odd) {
          background: rgba(0, 0, 0, 0.02);
        }
      }
    }

    .footer {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 22px;
      background: #f5f5f5;
      cursor: pointer;
      border-top: 1px solid #d9d9db;

      &.rotate {
        > i {
          transform: rotate(180deg);
        }
      }
    }
  }
</style>
